<style type="text/css">
	.userlist {
	    padding-left: .5em;
	    padding-right: .5em;
	  }
	  .userlist-item {
	    padding: .5em 0;
	  }
	  .userlist-img {
	    width: 2.2em;
	    height: 2.2em;
	    border-radius: .3em;
	  }
	  .userlist-name {
	    margin-left: .5em;
	  }
	  .userlist .children {
	    margin-left: 2em;
	  }
	  .userlist .children .children {
	    margin-left: 2em;
	  }
	  .userlist .children .children .children {
	    margin-left: 2em;
	  }
	  .userlist .children .children .children .children {
	    margin-left: 0;
	  }
	  .userlist-info {
	    padding-bottom: .5em;
	    border-bottom: 1px solid #ccc;
	  }
	  .userlist-number {
	    text-align: right;
	    color: #999;
	  }
	  .face-bg {
	  	/*background:url( {$config.logo} ) no-repeat;*/ 
	  	background-size:cover;
	  }
</style>

<!-- TOPBAR -->
<header class="top-bar flex-row">
  <a class="row-item row-item-auto top-bar-back" href="javascript:window.history.back();">返回</a>
  <h3 class="row-item top-bar-name">我的客户</h3>
  <a class="row-item row-item-auto top-bar-menu" href="javascript:location.reload()">刷新</a>
</header>

<empty name="userList">
	<p>您还没有客户</p>
</empty>

<notempty name="userList">
	<ul id="userList" class="userlist">
		<volist name="userList" id="vo">
			<li class="userlist-item" data-fid="{$vo.id}" data-sid="{$vo.cid}" data-level="1">
				<div class="flex-row userlist-info">
					<img class="userlist-img face-bg" src="<empty name="vo.face">{$config.logo}<else />{$vo.face}</empty>" alt="{$vo.nickname}">
					<h5 class="userlist-name row-item">{$vo['nickname']?$vo['nickname']:'游客'}<br><small>等级: {$vo.level}</small></h5>
					<span class="userlist-number row-item">({$vo.subCount})</span>
				</div>
			</li>
		</volist>
	</ul>
</notempty>

<template id="list">
	<ul class="children">
		{{each extra as value i}}
		<li class="userlist-item" data-fid="{{value.id}}" data-sid="{{value.cid}}">
			<div class="flex-row userlist-info">
				<img class="userlist-img face-bg" src="{{if value.face}}{{value.face}}{{else}}{$config.logo}{{/if}}" alt="{{value.nickname}}">
				<h5 class="userlist-name row-item">{{value.nickname?value.nickname:'游客'}}<br><small>等级: {{value.level}}</small></h5>
				<span class="userlist-number row-item">({{value.subCount}})</span>
			</div>
		</li>
		{{/each}}
	</ul>
</template>

<script type="text/javascript">
	$(function() {
	    $("#userList").on("click", ".userlist-item", function() {
	      var children = $(this).children(".children");
	      children.length ? $(children).toggle() : getList.call(this);
	    });
	
	    function getList() {
	        console.log(1);
	      APP.showLoading();
	
	      var obj = {}, _this = this;
	      obj.fid = $(this).attr("data-fid");
	      obj.sid = $(this).attr("data-sid");
	      obj.space_token = "{$spaceToken}";
	
	      $.post("__CONTROLLER__/downCust", obj, function(response) {
	        response.extra ? showList(_this, response) 
	                       : ( APP.hideLoading(), APP.alert("该分享客户下没有其他客户") );
	      });
	    };
	
	    function showList(ele, data) {
	      var html = "";
	      require(["artTemplate"], function(T) {
	        html = T("list", data);
	        $(ele).children(".children").length || $(ele).append(html);
	        APP.hideLoading();
	      });
	    };
	  });
</script>